<template>
  <div>
    <v-dialog title="应付调整" :show.sync="dialogVisible" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
          <!--<el-form-item label="应付款单单号" prop="chargeProject">
                        <el-input disabled="disabled" value="HT93920"></el-input>
          </el-form-item>-->
          <!--<el-form-item label="非税单号" prop="projectName">
                        <el-input disabled="disabled" value="HT93920"></el-input>
          </el-form-item>-->
          <el-form-item label="关联合同编码" prop="contractCode">
            <el-input disabled="disabled" v-model="form.contractCode"></el-input>
          </el-form-item>
          <el-form-item label="调整方式" prop="adjustmentType">
            <el-select v-model="form.adjustmentType" placeholder="请选择">
              <el-option v-for="item in adjustment_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明" prop="remarks">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="tableDataArr" style="width: 100%">
          <!--<el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
          <el-table-column prop="buildingName" label="楼栋" width="120"></el-table-column>-->
          <el-table-column prop="projectName" label="物业名称" width="120"></el-table-column>
          <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120"></el-table-column>
          <el-table-column prop="costProjectName" label="费用对象" width="120"></el-table-column>
          <el-table-column prop="chargeProjectName" label="收费项目" width="120"></el-table-column>
          <el-table-column prop="costPeriodStart" label="费用周期" width="260">
            <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column prop="payableDate" label="应付日期" width="120">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.payableDate " type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="应付日期"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="payableMoney" label="应付金额" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.payableMoney" placeholder="请输入"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="foot">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-throttle="[commit]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { addObj } from '@/views/wy-lessor/rentalSociety/api/finance-collection-receivable-adjustment'
import uploadMedia from '@/components/upload-media'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import { mapState } from 'vuex'
import { validateEditTable } from "@/utils";
export default {
  mixins: [BaseLoad],
  components: { uploadMedia, engineerList },
  computed: {
    ...mapState({
      adjustment_type: state => {
        let data = state.dict.find(item => item.type === "adjustment_type") || {}
        let list = data.children || []
        return data.children || []
      },
    })
  },
  data () {
    return {
      fileSize: 50,
      formData: {},
      input: '',
      value: '',
      area: [],
      form: {
        payStatus: '',
        contractCode: '',
        adjustmentType: '',
        chargeProject: '',
        projectName: '',
        propertyNames: '',
        payableMoney: '',
        costProjectName: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        payableDate: '',
        billNumber: '',
        taxAmount: '',
        remarks: '',
        costPeriodArr: [],
      },
      form1: '',
      selectDataArr: [],
      dialogVisible: false,
      isEdit: false,
      rules: {
        payableMoney: [{ required: true, message: '请选择缴费状态', trigger: 'blur' }],

        payStatus: [{ required: true, message: '请选择缴费状态', trigger: 'blur' }],
        adjustmentType: [{ required: true, message: '请选择调整方式', trigger: 'blur' }]
      },
      rules1: {
        payableMoney: [{ required: true, message: '请选择缴费状态', trigger: 'blur' }],

      },
      editTableRules: [
        { attribute: 'payableDate', label: '应付日期' },
        { attribute: 'payableMoney', label: '应付金额' }
      ],
      tableDataArr: [{
        projectName: '',
        buildingArea: '',
        costProjectName: '',
        chargeProject: '',
        costMonth: '',
        chargeProjectName: '',
        payableDate: '',
        costPeriodStart: '',
        costPeriodEnd: '',
        payableMoney: '',
        costPeriodArr: [],
        receivableId: '',
        remarks: '',
      }],
    }
  },
  mounted () {
  },
  methods: {
    show (item) {
      this.dialogVisible = true
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        if (item) {
          this.isEdit = true
          this.form = item
          console.log(item)
          Object.keys(this.form).forEach(key => {
            this.form[key] = item[key]
          })
          this.tableDataArr[0].projectName = this.form.projectName
          this.tableDataArr[0].buildingArea = this.form.buildingArea
          this.tableDataArr[0].costProjectName = this.form.costProjectName
          this.tableDataArr[0].chargeProject = this.form.chargeProject
          this.tableDataArr[0].chargeProjectName = this.form.chargeProjectName
          this.tableDataArr[0].payableDate = this.form.payableDate
          this.tableDataArr[0].costPeriodStart = this.form.costPeriodStart
          this.tableDataArr[0].costPeriodEnd = this.form.costPeriodEnd
          this.tableDataArr[0].payableMoney = this.form.payableMoney
          this.form.remarks = ''
        }
      }, 200)

    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.tableDataArr[0].adjustmentType = this.form.adjustmentType
          this.tableDataArr[0].receivableId = this.form.receivableId
          this.tableDataArr[0].remarks = this.form.remarks
          //validateEditTable(this.tableDataArr[0], this.editTableRules).then((e) => {
          //    if (e) {
          addObj(this.tableDataArr[0]).then(resp => {
            if (resp.data.data) {
              this.suc('添加成功')
              this.dialogVisible = false
              this.handleCancel()
              //alert('resetList')
              this.$emit('resetList')
            } else {
              this.err('添加失败')
            }
          })
          //     } else {
          // console.log('2', e)
          //    }
          //})
        }
      })
    },
    handleCancel () {
      this.dialogVisible = false
      this.handleEmpty()
    },
    handleEmpty () {
      this.form.adjustmentType = ''
      this.form.receivableId = ''
      this.form.projectName = ''
    },
    beforeClose (done) {
      done()
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();

@include info-list(2);
@include formWrap(3);
</style>
